<template>
  <div class="dailyPerformance">
    <div class="dp-search">
      <input type="text" placeholder="输入搜索内容" v-model='searchcontent' @keyup='searchresult'>
      <div class="searchBtn" @click='searchresult'>搜索</div>
    </div>
    <div class="down">
      <tree-table :data="search?search:data" :columns="columns" :maxHeight="maxHeight" v-if='maxHeight' />
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import treeTable from "./../TreeTable";

export default {
  name: "dailyPerformance",
  data() {
    return {
      columns: [
        {
          text: "账号",
          value: "tda"
        },
        {
          text: "姓名",
          value: "tdb"
        },
        {
          text: "级别",
          value: "tdc"
        },
        {
          text: "考核",
          value: "tdd"
        },
        {
          text: "团队",
          value: "tde"
        },
        {
          text: "部门",
          value: "tdf"
        },
        {
          text: "个人业绩",
          value: "tdg"
        }
      ],
      data: [],
      maxHeight: "",
      search: "",
      searchcontent: ''
    };
  },
  components: { treeTable },
  mounted() {
    let that = this;
    that.maxHeight = document.querySelector(".down").offsetHeight + "";
    window.onresize = function() {
      that.maxHeight = document.querySelector(".down").offsetHeight + "";
    };
  },
  created() {
    this.$parent.flag = true;
    this.getDate();
  },
  methods: {
    searchresult() {
      let arr = [];
      if (this.searchcontent === '') {
        this.search = "";
        return;
      }
      this.searchcontent = this.searchcontent.trim();
      this.data.forEach(el => {
        if (
          el.loginName.includes(this.searchcontent) ||
          el.trueName.includes(this.searchcontent)
        ) {
          let content = {},
            k;
          for (k in el) {
            if (k == "children") continue;
            content[k] = el[k];
          }
          arr.push(content);
        }
        el.children.forEach(item => {
          if (
            item.loginName.includes(this.searchcontent) ||
            item.trueName.includes(this.searchcontent)
          ) {
            arr.push(item);
          }
        });
      });
      this.search = arr;
    },
    getDate() {
      u.userTree({}, data => {
        this.data = data.data.map((el, elIndex) => {
          let arr = el.memberList.map((item, index) => {
            return {
              tda: item.loginName,
              tdb: "*" + item.trueName.substring(1),
              tdc: item.memberLevelString,
              tdd: item.groupLevel,
              tde: item.todaySelfAchievement,
              tdf: item.todayGroupAchievement,
              tdg: item.todayDeptAchievement,
              loginName: item.loginName,
              trueName: item.trueName
            };
          });
          return {
            tda: el.loginName,
            tdb: "*" + el.trueName.substring(1),
            tdc: el.memberLevelString,
            tdd: el.groupLevel,
            tde: el.todaySelfAchievement,
            tdf: el.todayGroupAchievement,
            tdg: el.todayDeptAchievement,
            loginName: el.loginName,
            trueName: el.trueName,
            children: arr
          };
        });
      });
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.dailyPerformance {
  padding: 20px 30px;
  width: 100%;
  height: 100%;
  background: white;

  .dp-search {
    margin-bottom: 30px;
    height: 40px;

    input {
      padding: 0 14px;
      width: 370px;
      height: 100%;
      font-size: 14px;
      color: #747474;
      outline: none;
      border: 1px solid #c9cfda;
      vertical-align: top;

      &:focus {
        border-color: #ffb001;
      }

      &::-webkit-input-placeholder {
        color: #999999;
      }

      &:-moz-placeholder {
        color: #999999;
      }
    }

    .searchBtn {
      margin-left: 20px;
      display: inline-block;
      width: 75px;
      height: 100%;
      text-align: center;
      line-height: 40px;
      color: white;
      font-size: 14px;
      background: #ffb001;
      border-radius: 2px;
      cursor: pointer;
      vertical-align: top;
    }
  }
}

.down {
  height: calc(100% - 80px);
  overflow: hidden;
  overflow-y: hidden;
}
</style>
